<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/element.ui.css"/>
    <title>mybatis的where条件生成</title>
    <style>
        *{font-family: 宋体 !important;padding:0;margin:0;}
        html,body,#app{width:100%;}
        .card{    width: 80%;  margin: 50px auto;}
        .line{height:1px;width:100%;background-color: #ccc;margin-bottom: 10px;}
        .title{margin-top:20px;}
        .title h2{text-align: center;}
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div class="title">
        <h2>mybatis where条件生成</h2>
    </div>
    <div id="app" v-cloak>
        <div class="card">
            <el-card class="box-card" style="padding: 40px 40px 0px 40px;">
                <el-form label-position="left" label-width="80px" :model="form">
                    <el-form-item label="SQL">
                        <el-input
                                type="textarea"
                                autosize
                                placeholder="请输入SQL"
                                v-model="form.sql"></el-input>
                    </el-form-item>

                    <el-form-item label="where条件">
                        <el-input
                                @change="change"
                                type="textarea"
                                autosize
                                placeholder="请输入WHERE条件"
                                v-model="form.where"></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <div class="line"></div>
                    </el-form-item>

                    <el-form-item v-for="(item,index) in params" :label="item.param">
                        <el-input v-model="attrs[index]" :placeholder="item.param | prompt"></el-input>
                    </el-form-item>



                    <transition name="el-zoom-in-center">
                        <el-form-item v-if="result != ''" label="结果">
                            <div class="line"></div>
                            <el-input autosize type="textarea" v-model="result"></el-input>
                        </el-form-item>
                    </transition>

                    <el-form-item label="">
                        <el-button type="primary" @click="gen">生成</el-button>
                        <el-button type="primary" @click="close">关闭窗口</el-button>
                    </el-form-item>
                </el-form>


            </el-card>

        </div>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script src="../js/element.ui.js"></script>
<script>
    Vue.filter('prompt',function(value){
        return '请输入' + value + '的属性值';
    });
    var v = new Vue({
        el : "#app",
        data : {
            result : '',
            form : {
                sql : '',
                where : ''
            },
            params : null,
            attrs : []
        },
        methods : {
            close : function(){
                testController.say('你好');
            },
            gen : function () {
                if(this.form.sql.trim() == ''){
                    this.$message.error('请填写SQL');
                    return;
                }
                if(this.attrs.length != this.params.length){
                    this.$message.error('请把属性值填写完成');
                    return;
                }else{
                    var str = 'where 1=1 \n';
                    for(var i = 0 ; i < this.params.length ; i ++){
                        var atr = this.attrs[i];
                        var fuhao = this.params[0]['fuhao'];
                        str = str + '<if test="'+atr+' != null and '+atr+' != \'\' ">\n';
                        str += '\t and b.ref_id1 '+fuhao+' #{'+atr+'} \n';
                        str += '</if>\n';
                    }
                    str = this.form.sql + '\n' + str;
                    this.result = str;

                }
            },
            change : function(){
                var str = this.form.where.trim();
                if(str.indexOf('and') != -1 && str.indexOf('AND') != -1){
                    this.$message.error('where条件不能同时有大写AND和小写and');
                    return;
                }
                var strArray = str.split("AND");
                if(strArray == 1){
                    strArray = str.split("and");
                }
                var params = new Array();
                for(var i = 0 ; i < strArray.length ; i ++){
                    var condition = strArray[i].trim();
                    var fuhao = '=';
                    var conditionSplit = condition.split(fuhao);
                    if(conditionSplit.length != 2){
                        fuhao = '>';
                        conditionSplit = condition.split(fuhao);
                    }else if(conditionSplit.length != 2){
                        fuhao = '>=';
                        conditionSplit = condition.split(fuhao);
                    }else if(conditionSplit.length != 2){
                        fuhao = "<";
                        conditionSplit = condition.split(fuhao);
                    }else if(conditionSplit.length != 2){
                        fuhao = "<=";
                        conditionSplit = condition.split(fuhao);
                    }else if(conditionSplit.length != 2){
                        fuhao = "like";
                        conditionSplit = condition.split(fuhao);
                    }else{
                        if(conditionSplit.length != 2){
                            throw Error('参数不合法:' + condition);
                        }else{
                            var param = conditionSplit[0].trim();
                            params.push({param : param , fuhao : fuhao});
                        }
                    }
                }
                this.params = params;
            }
        }
    });
</script>
</html>